import React from 'react'
import { connect } from 'react-redux'
import { auth0 as auth0Duck } from 'ducks'
import { Menu, Image, Button } from 'semantic-ui-react'
import HomeHeader from 'components/homeHeader'
import lock from '../auth0'

const header = ({ actionShow }) => (
  <HomeHeader>
    <Menu.Item>
      <Image size="mini" src="https://static.thenounproject.com/png/1450092-200.png" />
    </Menu.Item>
    <Menu.Item header>智擎云</Menu.Item>
    <Menu.Menu position="right">
      <Menu.Item as="a">官网首页</Menu.Item>
      <Menu.Item as="a">文档中心</Menu.Item>
      <Menu.Item>
        <Button
          basic
          size="mini"
          color="blue"
          onClick={() => {
            actionShow(lock)
          }}
        >
          登录
        </Button>
      </Menu.Item>
      <Menu.Item>
        <Button basic size="mini" color="blue">
          注册
        </Button>
      </Menu.Item>
    </Menu.Menu>
  </HomeHeader>
)

const mapDispatchToProps = {
  actionShow: auth0Duck.creators.actionShow,
}

export default connect(
  null,
  mapDispatchToProps,
)(header)
